<template>
  <div>
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
      status-icon>
      <Step01 />
      <Step02 />
      <Step03 />
      <Step04 />
    </el-form>
  </div>
</template>
  
<script setup lang='ts'>
import Step01 from './components/step01.vue'
import Step02 from './components/step02.vue'
import Step03 from './components/step03.vue'
import Step04 from './components/step04.vue'
import { reactive, ref } from 'vue'
import * as http from '@/request/api'

const form = reactive({
  name: 'Hello',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const step01 = reactive({
  productCategoryName: '',//商品分类
  name: '',//商品名称
  subTitle: '',//副标题
  brandName: '',//商品品牌
  description: '',//商品描述
  productSn: 0,//商品货号
  originalPrice: 0,//市场价
  promotionPrice: 0,//商品售价
  unit: 0,//计量单位
  weight: 0,//商品重量
})
const step02 = reactive({
  giftPoint: 0,//赠送的积分
  giftGrowth: 0,//赠送的成长值
  usePointLimit: 0,//限制使用的积分数
  previewStatus: '',//预告商品
  serviceIds: '',// 服务保证
  detailHtml: '',// 详细页标题
  promotionType: 0,//促销类型
  promotionStartTime: '2022-08-18T12:16:53.274Z',//促销开始时间
  promotionEndTime: '2022-08-18T12:16:53.274Z',//促销结束时间
  promotionPrice: 0,//促销价格
  memberPriceList: [//商品会员价格设置
    {
      id: 0,
      memberLevelId: 0,
      memberLevelName: '',
      memberPric: 0,
      productId: 0
    }
  ],
  productLadderList: [//商品阶梯价格设置
    {
      count: 0,
      discount: 0,
      id: 0,
      price: 0,
      productId: 0
    }
  ],
  productFullReductionList: [//商品满减价格设置
    {
      fullPrice: 0,
      id: 0,
      productId: 0,
      reducePrice: 0
    }
  ]
})
const step03 = reactive({
  productCategoryName: '',//商品分类
  name: '',//商品名称
  subTitle: '',//副标题
  brandName: '',//商品品牌
  description: '',//商品描述
  productSn: 0,//商品货号
  originalPrice: 0,//市场价
  promotionPrice: 0,//商品售价
  unit: 0,//计量单位
  weight: 0,//商品重量
})

const rules = reactive<any>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

</script>
  
<style scoped>
</style>